<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="soccer.css">
</head>

<body>

  <h2>Расставьте супергероев по полю.</h2>

  <p>Супергерои и мяч - это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
    
  <p>Важно: ограничить перетаскивание границами окна. Если супергероя подносят к верхней или нижней границе страницы, она должна автоматически прокручиваться.</p>

  <p>Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>

  <p>В этой задаче достаточно справиться с вертикальной прокруткой. Обычно нет горизонтальной прокрутки, и она обрабатывается аналогичным образом, если это необходимо.</p>

  <p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>

  <div id="field">

  </div>

  <div class="hero draggable" id="hero1"></div>
  <div class="hero draggable" id="hero2"></div>
  <div class="hero draggable" id="hero3"></div>
  <div class="hero draggable" id="hero4"></div>
  <div class="hero draggable" id="hero5"></div>
  <div class="hero draggable" id="hero6"></div>

  <img src="https://en.js.cx/clipart/ball.svg" class="draggable">

  <div style="clear:both"></div>

  <script src="soccer.js"></script>
</body>

</html>
